import React, {Component} from 'react';

import {Layout, Menu, Breadcrumb} from 'antd';

import {UserOutlined, LaptopOutlined, NotificationOutlined, EditOutlined} from '@ant-design/icons';

import logo from '../../assets/imgs/logo.png';

import {HashRouter as Router, Route, Switch} from 'react-router-dom';

import Article from './article';
import ArticleAdd from './articleAdd';
import Setting from './setting';


const {SubMenu} = Menu;

const {Header, Content, Sider} = Layout;


class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            initPathName: '',
        }
    }


    componentDidMount() {
        let pathName = this.props.location.pathname;
        this.setState({
            initPathName: pathName
        })
    }

    menuChange = (options) => {
        console.log(options);
        console.log(this.props);
        let {key} = options;

        this.setState({
            initPathName: key
        })

        this.props.history.push(key);
    }

    render() {
        return (
            <Layout>
                <Header className="header">
                    <div className="login">
                        <img height="60" src={logo} alt="cms logo"/>
                    </div>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            onClick={this.menuChange}
                            mode="inline"
                            defaultSelectedKeys={['/admin/article']}
                            defaultOpenKeys={['sub1']}
                            style={{height: '100%', borderRight: 0}}
                        >
                            <SubMenu key="sub1" icon={<EditOutlined/>} title="文章管理">
                                <Menu.Item key="/admin/article">文章列表</Menu.Item>
                                <Menu.Item key="/admin/articleAdd">文章添加</Menu.Item>
                            </SubMenu>

                            <SubMenu key="sub2" icon={<UserOutlined/>} title="系统设置">
                                <Menu.Item key="/admin/setting">系统信息</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{padding: '0 24px 24px'}}>

                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            内容，稍后我们的 内容在这里展示
                            {/*文章管理和分类管理都是属于后台的首页的子页面。则我们需要定义嵌套路由实现*/}
                            {/*默认展示文章列表*/}

                            {
                                this.state.initPathName == '/admin/' ? <Article/> : null
                            }
                            <Router>
                                <Switch>

                                    <Route path="/admin/article" component={Article}></Route>
                                    <Route path="/admin/articleAdd" component={ArticleAdd}></Route>
                                    <Route path="/admin/setting" component={Setting}></Route>
                                </Switch>
                            </Router>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        );
    }
}

export default Index;
